<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="TreedialogVisible" class="equip-dialog" :title="typeTitle" width="640px" @open="openDialog"
    @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-form-item v-if="dialogRow.parentId == -1" label="系统名称" prop="name">
        <px-input v-model="formValue.name" placeholder="请输入类型名称" maxlength="50" clearable />
      </px-form-item>
      <px-form-item v-else label="设备类型" prop="name">
        <px-input v-model="formValue.name" placeholder="请输入类型名称" maxlength="50" clearable />
      </px-form-item>
      <px-form-item v-if="dialogRow.parentId == -1" label="系统编码" prop="parentCode">
        <px-input v-model="formValue.parentCode" maxlength="50" clearable disabled />
      </px-form-item>
      <px-form-item v-else label="类型编码" prop="parentCode">
        <px-input v-model="formValue.parentCode" maxlength="50" clearable disabled />
      </px-form-item>
      <px-form-item label="描述" prop="remark">
        <px-input v-model="formValue.remark" :rows="2" type="textarea" placeholder="请输入" maxlength="1000" clearable />
      </px-form-item>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { addTreeLedger, editTreeLedger } from "@/api/erc/equip";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "queryTree"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  TreedialogVisible: {
    type: Boolean,
    default: false
  },
  // 弹窗类型 add 新增 edit 编辑
  dialogType: {
    type: String,
    default() {
      return "add";
    }
  },
  // 表单数据
  dialogRow: {
    type: Object,
    default() {
      return {};
    }
  }
});
const TreedialogVisible = computed(() => props.TreedialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增",
  formValue: {
    id: "",
    name: "",
    parentCode: "",
    remark: "",
    code: ""
  }
});
const { formValue, typeTitle } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "类型名称不能为空", trigger: ["blur", "change"] }],
}));

// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  if (props.dialogType === "add") {
    console.log(props.dialogRow);
    typeTitle.value = "新增";
    formValue.value.code = "";
    formValue.value.remark = "";
    formValue.value.parentCode = props.dialogRow.code;
    delete formValue.value.id;
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑";
    console.log(`编辑`);
    const { id, name, parentCode, remark, code } = props.dialogRow;
    console.log(props.dialogRow);
    formValue.value.id = id;
    formValue.value.parentCode = parentCode;
    formValue.value.name = name;
    formValue.value.parentCode = parentCode;
    formValue.value.remark = remark;
    formValue.value.code = code;
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {
    id: "",
    code: "",
    name: "",
    downType: ""
  };
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (props.dialogType === "add") {
        await addTreeLedger({ name: formValue.value.name, parentCode: props.dialogRow.code, remark: formValue.value.remark });
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTree");
      } else if (props.dialogType === "edit") {
        const params = formValue.value;
        await editTreeLedger(params);
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTree");
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 108px;
    text-align: right;
  }
}
</style>
